<template>
  <div class="container">

    <!-- 面包屑导航 -->
    <navbar></navbar>
    <!--
    <div class="content page-title">
      <h2>标签管理</h2>
    </div>
    -->
    <div class="content group-detail">
      <h2 class="title_class">客户分群</h2>
    </div>
    <div class="content customer-label">
      <div class="content-box">
        <div class="content-box-right">
          <graphic-content></graphic-content>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import navbar from '@/components/navbar.vue'
import LabelTree from './components/LabelTree.vue'
import GraphicContent from './components/GraphicContent.vue'
import common from './mixins/common'

export default {
  mixins: [common],
  components: {
    navbar,
    LabelTree,
    GraphicContent
  },
  data () {
    return {
      loading: false,
      defaultProps: '',
      page: { list: [], pageNo: 1, pageSize: 8, totalNum: 0, currentPage: 1 },

      searchForm: {},
      salesAuthority: [
        { reallyName: 'reallyName',
          id: 123
        }
      ]
    }
  },
  mounted () {
    this.$nextTick(_ => {
      console.log('mounted this.$nextTick')
    })
  },
  created () {
    // 获取默认数据
    // this.fetchDefaultData()
    // console.log(process.env)
  },
  watch: {
    /* 监听*/
    $route () {
      // this.testFun();
    }
  },
  methods: {
    // 获取默认数据
    fetchDefaultData () {
      this.getEmployeeRanking(true) // 员工排行榜
    },
    // 员工排行榜
    getEmployeeRanking () {
      const params = {}
      this.$api.employeeRanking(params).then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
    },
    // ****************** 翻页 ******************
    currentChange (currentChange) {
      this.page.pageNo = currentChange
      this.getEmployeeRanking(false, this.dateArr, this.orgCode)
    },
    sizeChange (sizeChange) {
      this.page.pageNo = 1
      this.page.currentPage = 1
      this.page.pageSize = sizeChange
      this.getEmployeeRanking(false, this.dateArr, this.orgCode)
    },
    // ****************** 翻页 end ******************
    append (data) {
      console.log(data)
    }
  }
}
</script>

<style scoped lang="scss">
@import './assets/common';
///deep/ .el-table th > .cell { text-align: unset; }
.content{
  padding-bottom: 10px!important;
}
.group-detail{
  h2{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}
h2 {
  position: relative;
  margin-bottom: 21px;
  padding-left: 11px;

  &:before {
    position: absolute;
    top: 4px;
    left: 0;
    display: inline-block;
    content: '';
    width: 4px;
    height: 17px;
    background-color: #2d7edf;
  }
}
.program-but, .custom-but{
  //width: 128px;
  //height: 36px;
  //border-radius: 5px;
  color: #ffffff;
}
.program-but{
  background-color: #12AB62;
}
.custom-but{
  background-color: #4168E7;
}
.customer-label{
  padding: 0!important;
  .content-box {
    display: flex;
    background-color: #f5f5f5;
    .content-box-left, .content-box-right {
      //background-color: #ffffff;
      float: left;
    }

    .content-box-right {
      width: 100%;

    }
  }
}

.label-button{
  display: flex;
  .label, .button-list{
    flex: 1;
  }
.label{text-align: left;line-height: 40px;}
.button-list{
text-align: right;
}
}
.title_class{
  margin-top: 10px ;
  margin-bottom: 10px !important;
}
</style>
